<script setup>
//安装icon图标
import {
  Document,
  Setting,
  Goods,
  CreditCard,
  Tickets,
  User,
  Sunny,
  Moon,
  Fold,
  Promotion,
} from '@element-plus/icons-vue'
// 引入useDark
import { useDark } from '@vueuse/core';
import {reactive, ref} from "vue";
import router from "@/router/index.js";
import { ElMessage  } from 'element-plus'
import axios from "@/plugins/axios.js";


//引入菜单
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}

// 使用useDark
const isDark = useDark()

// 主题配置
const themeConfig = reactive({
  isDark: isDark,
});
// 默认主题颜色
const themeColor = ref('#f0f2f5')
// 切换颜色
const toggleTheme = () => {
  themeColor.value = themeColor.value === '#1E1E2D' ? '#f0f2f5' : '#1E1E2D';
}



//是否折叠
const isCollapse = ref(false)
const handleCollapse = () => {
  isCollapse.value = !isCollapse.value
  //小logo、大logo替换
  if (isCollapse.value){
    document.querySelector('.img2').style.display =  'block'

  }else {
    document.querySelector('.img2').style.display = 'none'
  }
  if (isCollapse.value){
    document.querySelector('.img').style.display = 'none'
  }else {
    document.querySelector('.img').style.display = 'block'
  }

}
const dialogTableVisible = ref(false)
const dialogTableVisibleTow = ref(false)
//抽屉
const drawer = ref(false)

//退出登录
const logout = () => {
  axios.get('/api/auth/logout').then(res => {
    if (res.data.code === 200){
      router.push('/')
      localStorage.removeItem('creamDataToken')
      ElMessage .success("退出成功")
    }
  })

}

const user = ref("");
const getUser = () => {
  axios.get("/api/auth/getUserInfo").then((res) => {
    if (res.data.code === 200){
      user.value = res.data.data.username
      console.log(userList.value)
    }else {
      ElMessage.error(res.data.message)
    }
  })
}
getUser()

</script>

  <template>
    <div class="common-layout">
      <el-container>
        <el-aside :class="{collapsed: isCollapse}"  class="asideWidth">
          <el-row>
            <el-col  :xs="12">
              <el-drawer v-model="drawer" direction="ltr" :with-header="false" :size="'55%'">
                <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo2"
                    @open="handleOpen"
                    @close="handleClose"
                >
                  <el-menu-item index="1" @click="router.push('/home/')">
                    <el-icon><User /></el-icon>
                    <template #title>个人中心</template>
                  </el-menu-item>
                  <el-menu-item index="2" @click="router.push('/home/list')">
                    <el-icon><Goods /></el-icon>
                    <template #title>购买/续费</template>
                  </el-menu-item>
                  <el-menu-item index="3">
                    <el-icon><Tickets /></el-icon>
                    <template #title>使用教程</template>
                  </el-menu-item>
                  <el-menu-item index="4">
                    <el-icon><CreditCard /></el-icon>
                    <template #title>我的礼券</template>
                  </el-menu-item>
                  <el-menu-item index="5">
                    <el-icon><Document /></el-icon>
                    <template #title>支付记录</template>
                  </el-menu-item>
                  <el-menu-item index="6" @click="logout">
                    <el-icon><setting /></el-icon>
                    <template #title>退出系统</template>
                  </el-menu-item>
                </el-menu>
              </el-drawer>
            </el-col>
          </el-row>
          <el-row class="asideWidth">
            <img src="../assets/img/img.png" alt="" class="img" @click="router.push('/home/')">
            <img src="../../public/img_1.png" alt="" class="img2" @click="router.push('/home/')">
            <el-col :lg="24">
              <el-menu
                  default-active="1"
                  class="el-menu-vertical-demo"
                  :collapse="isCollapse"
                  :collapse-transition="false"
                  @open="handleOpen"
                  @close="handleClose"
              >
                <el-menu-item index="1" @click="router.push('/home/')">
                  <el-icon><User /></el-icon>
                  <template #title>个人中心</template>
                </el-menu-item>
                <el-menu-item index="2" @click="router.push('/home/list')">
                  <el-icon><Goods /></el-icon>
                  <template #title>购买/续费</template>
                </el-menu-item>
                <el-menu-item index="3">
                  <el-icon><Tickets /></el-icon>
                  <template #title>使用教程</template>
                </el-menu-item>
                <el-menu-item index="4">
                  <el-icon><CreditCard /></el-icon>
                  <template #title>我的礼券</template>
                </el-menu-item>
                <el-menu-item index="5">
                  <el-icon><Document /></el-icon>
                  <template #title>支付记录</template>
                </el-menu-item>
                <el-menu-item index="6" @click="logout">
                  <el-icon><setting /></el-icon>
                  <template #title>退出系统</template>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
          <div>
            <el-popover
                placement="bottom"
                :width="150"
                trigger="hover"
                content="请在您的设备上安装Telegram软件"
            >
              <template #reference>
                <el-card style="text-align: center; width: 75%; margin-left: 8%;" >
                  <div>
                    <el-icon size="15px"><Promotion /></el-icon>
                    <a href="" class="card_a">加入在线群组</a>
                  </div>
                </el-card>
              </template>
            </el-popover>
          </div>
        </el-aside>
        <el-container>
          <el-header class="header">
            <img src="../../public/img_1.png" class="img_A" alt="" style="width: 30px; height: 41px; margin-top: 1%">
            <el-row style="width: 100%;" class="row">
              <el-col :lg="21" :xs="5">
                <!--移动端侧边栏折叠按钮-->
                <el-button  class="el-button2"  @click="drawer = true">
                  <el-icon><Fold /></el-icon>
                </el-button>
                <!-- pc侧边栏折叠按钮-->
                <el-button @click="handleCollapse" class="el-button"><el-icon><Fold /></el-icon></el-button>
              </el-col>
              <el-col :lg="3" :xs="11"  class="accountCol">
                <div>
                  <!--  v-model 绑定 themeConfig.isDark-->
                  <el-switch @click="toggleTheme" v-model="themeConfig.isDark" inline-prompt :active-icon="Sunny" :inactive-icon="Moon" />
                  <!-- 账号信息-->
                  <el-popover
                      placement="top-start"
                      :width="200"
                      trigger="hover"
                  >
                    <template #default>
                      <el-button type="text" size="large" @click="router.push()">修改密码</el-button>
                      <br>
                      <el-button type="text" size="large" @click="logout">退出登录</el-button>
                    </template>
                    <template #reference>
                      <span class="account">您好, {{user}}</span>
                    </template>
                  </el-popover>
                </div>
              </el-col>
            </el-row>
          </el-header>
          <el-main :style="{ '--main-bg-color': themeColor  }" class="main-content">
            <router-view/>
          </el-main>
          <el-footer style=" color: black;">
            <div class="divText"><el-text class="text-element3">版权所有 2022-2024&copy; YanKai团队</el-text><el-text class="text-element" @click="dialogTableVisible = true">服务条款</el-text><el-text class="text-element2" @click="dialogTableVisibleTow = true">隐私政策</el-text></div>
          </el-footer>
        </el-container>
      </el-container>
    </div>

  <el-dialog v-model="dialogTableVisible"  width="800">
    <!---->
    <h1 class="“title”">CreamData服务条款</h1> <div>
    CreamData有权在任何时间及不需事先通知的情况下修改、取消、新增、替代任何在此列明的条款，而此条款均对本站点的使用者及注册会员有效力及约束力。因此，您应定期流览本页。如在本条款作出修订后仍继续使用本站点，即被视为接受这些修订。
  </div> <div>
    当您使用CreamData或注册成为本平台会员的同时，您将会被视作接受本条款之所有规则约束。请您在使用本平台前仔细阅读所有有关条款。
  </div> <div>本条款最新修订日期为二零二一年十二月八日</div> <h1 class="“sec-title”">服务</h1> <div>CreamData服务是暂时性的数位网络通信服务，可增强Internet安全性和隐私性。根据您的个人要求和您的全权酌情决定权，我们会自动提供不受监管和不受监控的数据管道-虚拟私人网络（VPN）连接-供您专有使用，您对使用CreamData服务负全责。CreamData对用户采取的行动不承担任何责任，包括对已执行或未执行的损害承担刑事责任和民事责任。这些条款的其他规定进一步限制了CreamData的责任。</div> <div>
    我们授予您使用CreamData服务的许可，但要遵守这些条款中规定的限制。您使CreamData服务的风险自负。CreamData服务可以随时修改，更新，中断或暂停，恕不另行通知或承担责任。对于由此造成的对您的任何伤害或其他不利后果，我们不承担任何责任。CreamData，其所有者，员工，代理商和其他与CreamData服务相关的人员，对于因使用或向使用其注册的任何帐户而产生或引起的任何已执行或未执行的任何形式的损害，概不负责。
  </div> <div>
    CreamData保证服务正常运行，但由于您所在地区网络限制导致用户无法连接CreamData部分或全部服务器线路，CreamData对此不承担责任。CreamData不对客户支付给CreamData以外的任何金钱或非金钱损失负责，并且这不包括律师费或法庭费用，与任何法律或其他成文法则无关。
  </div> <h1 class="“sec-title”">退款政策</h1> <div>
    如果您希望退款，可以在购买CreamData服务后的7天内退款。我们寻求您对我们服务的完全满意。但是，我们想对您首先遇到的问题进行故障排除。存在一些常见的VPN服务配置问题，这些问题可能会阻止您使用CreamData服务，我们将解决大多数遇到的用户问题。
  </div> <div>
    通过iTunes购买的订阅须遵守iTunes退款政策。这意味着，如果您通过iTunes购买了应用程序，您必须联系iTunes商店退款。
  </div> <div>
    您有权随时取消您的帐户。您可以从您的网站数据，iTunes中取消自动订阅。在持续服务期内未使用的部分，已取消的帐户将不予退款。
  </div> <div>
    CreamData保留随时出于任何原因暂停或拒绝向任何人提供服务的权利。对于因违反这些条款而终止的帐户，将不考虑退款。
  </div><h1 class="“sec-title”">知识产权</h1> <div>根据这些条款和条件，我们授予您有限的、非排他的、个人的、不可转让的、不可再许可的许可，以：</div> <ul><li>下载和使用CreamData软件的副本；</li><li>使用CreamData服务，包括但不限于在CreamData软件或我们的网站上或通过我们的网站提供的产品和服务。根据CreamData服务，本协定未授予您任何其他权利或许可。本文提供的许可在终止之前一直有效。如果您不遵守这些条款，该许可将自动终止。</li></ul> <div>
    CreamData服务（包括但不限于CreamData软件，移动应用程序和所有其他项目）由CreamData拥有并拥有版权，并且在全球范围内受到保护。我们保留对CreamData服务及其任何部分的权利，所有权和利益，包括但不限于所有版权，商标，服务标记，商业秘密和其他知识产权。您不得采取任何行动来危害，限制或以任何管道干扰我们对CreamData服务的所有权和权利。除非另有说明，否则保留所有权利。
  </div> <h1 class="“sec-title”">禁止事项</h1> <div>
    您对CreamData服务的访问和使用受这些条款以及所有适用法律和法规的约束。对于任何违反任何适用法律或本条款的用户，我们保留随时酌情决定随时终止或阻止其访问CreamData服务的权利，无论是否另行通知。
  </div> <div>在使用CreamData服务时，您自己同意不协助、鼓励或允许其他人使用CreamData服务：</div> <div class="“text-indent1”">
    1）用于不正当的、禁止的、违法、犯罪或者欺诈活动，包括但不限于端口扫描，发送垃圾邮件，发送选择接收的电子邮件，扫描开放中继或开放代理，发送未经请求的电子邮件或发送的任何版本或类型的电子邮件即使通过协力厂商服务器路由电子邮件，任何快显视窗启动，使用被盗信用卡，信用卡欺诈，金融欺诈，加密货币欺诈，伪装，敲诈，勒索，绑架，强奸，谋杀，出售的信用卡被盗，出售被盗商品，提供或出售违禁，军事和双重用途商品，提供或出售受控物质，身份盗窃，骇客入侵，伪造，网络钓鱼，任何形式或规模的刮取，数位盗版，知识产权侵权和其他类似活动；
  </div><div class="“text-indent1”">
    2）通过CreamData服务以任何管道或形式攻击，干扰，获得未经授权的访问，拒绝任何其他网络，电脑或节点的服务；
  </div><div class="“text-indent1”">
    3）以任何管道剥削儿童，包括音讯，视频，摄影，数位内容等；
  </div><div class="“text-indent1”">
    4）以任何管道上传或分发包含病毒，蠕虫，特洛伊木马，损坏的档案或任何其他可能损害他人电脑操作的类似软件或程序的档案；
  </div><div class="“text-indent1”">
    5）干扰或试图干扰CreamData服务的正常工作，与CreamData服务有关的任何交易或我们进行的任何其他活动，破坏我们的网站或与CreamData服务相连的任何网络或绕过任何措施我们可能会用来阻止或限制对CreamData服务的访问；
  </div><div class="“text-indent1”">
    6）以任何未经授权的管道利用CreamData服务，包括但不限于侵入或新增网络容量；
  </div><div class="“text-indent1”">
    7）未经我们事先书面许可，出于任何目的使用任何机器人，蜘蛛，刮板或其他自动管道访问我们的网站或CreamData服务；
  </div><div class="“text-indent1”">
    8）收集或收集有关CreamData服务其他用户的个人信息；
  </div><div class="“text-indent1”">
    9）未经合法利益或同意，或违反任何适用法律而收集或收集个人数据；
  </div><div class="“text-indent1”">
    10）采取任何可能会对我们的基础构架施加不合理或不成比例的巨大负载的措施；
  </div><div class="“text-indent1”">
    11）与任何不合理数量的人共享任何数据或其他内容，包括但不限于向大量接收者发送爆炸性通信或与您不认识或不认识您的人共享内容；
  </div><div class="“text-indent1”">12）代表您是任何CreamData服务（包括其任何功能）的代表或代理商；</div><div class="“text-indent1”">
    13）将CreamData服务或其任何部分合并到任何其他程序或产品中；
  </div><div class="“text-indent1”">
    14）以任何形式或通过任何管道复制或复制CreamData服务的任何部分；
  </div><div class="“text-indent1”">
    15）根据CreamData服务修改，翻译，反向工程，反编译，反汇编或创建任何衍生作品，包括其任何档案或档案，或其任何部分，或确定或尝试确定任何原始代码，算法，方法或CreamData应用程序或其任何部分中包含的科技；
  </div><div class="“text-indent1”">
    16）违反一般的道德或道德规范，良好风俗和公平行为规范；
  </div><div class="“text-indent1”">
    17）侵犯任何协力厂商的权利，包括任何违反保密性，个人数据，版权或任何其他知识产权或所有权的权利；
  </div><div class="“text-indent1”">
    18）威胁，跟踪，伤害或骚扰他人，或助长偏执或歧视；
  </div><div class="“text-indent1”">
    19）试图操纵CreamData名称，服务或产品；
  </div><div class="“text-indent1”">
    20）向未成年人征求或收集个人信息或与未成年人交流；
  </div><div class="“text-indent1”">
    21）试图通过黑客攻击，密码挖掘，暴力破解或任何其他管道未经授权访问CreamData服务，使用者帐户，连接到CreamData服务的电脑系统或网络；
  </div><div class="“text-indent1”">
    22）将CreamData服务用于任何军事目的，包括网络战，武器开发，设计，制造或生产导弹，核，化学或生化武器；
  </div>
    <div class="“text-indent1”">
      23）以其他管道侵犯或规避这些条款。
    </div> <div>

    除此之外，长时间占用宽带进行下载导致服务器网络异常，影响到其他用户正常使用的，CreamData会采取措施限制滥用IP的网速。

  </div> <div>

    为了您的帐号安全，非定制帐号仅限个人使用，请勿将帐号分享给他人，分享给他人造成的损失将由您自己承担。

  </div> <div>

    我们保留自行决定拒绝服务，暂停帐户或限制访问CreamData服务的权利。CreamData可以立即实施此类暂停或访问限制，而无需任何指示，通知或退款。我们可能会暂停您的帐户以进行澄清，调查，或要求您解释您的操作并提供其他信息。如果您的帐户已被暂停，则必须与我们联系以获取更多资讯。在我们永久终止使用者帐户之前，我们可能会在合理的时间内暂停您的使用者帐户。

  </div> <div>

    我们没有义务对您执行条款。我们鼓励您让我们知道任何CreamData用户违反这些条款的情况；但是，如果发生此类违规行为，我们可以自行决定采取适当的措施。

  </div> <h1 class="“sec-title”">免责声明</h1> <div>

    我们将努力防止网站和服务受到干扰。但是，这些内容是按“原样”和“可用”的基础提供的，我们不保证（明示或暗示）通过本站点或服务提供的任何数据或信息的准确性，或它们对以下内容的适用性：任何特定目的。我们明确否认任何形式的担保，无论是明示的还是暗示的，包括但不限于适销性或针对特定目的的适用性或非侵权的担保。我们不保证本服务将满足您的要求，也不保证其不间断，及时，安全或无错误，也不对任何缺陷进行纠正。您承认自己承担风险和酌情权访问网站和服务。

  </div> <div>

    CreamData保留调查我们认为违反这些条款的问题的权利。我们可能会（但无义务）在不另行通知的情况下，自行决定，以任何管道删除，阻止，过滤或限制我们认为是实际或潜在违反本条款所规定限制的任何数据或信息，以及任何其他可能使CreamData或我们的客户承担责任的活动。CreamData对我们未能防止此类数据或信息通过“服务”和/或进入您的计算设备的任何故障不承担任何责任。

  </div> <h1 class="“sec-title”">适用法律</h1> <div>

    本协定应受塞舌尔法律的管辖并根据其解释，但其法律冲突规则除外。

  </div> <h1 class="“sec-title”">服务条款的变更</h1> <div>

    根据适用的法律和原则，我们可能会不时更改条款服务条款，恕不另行通知。您继续使用本站点或服务即表示您接受我们的隐私政策。

  </div> <h1 class="“sec-title”">联系我们</h1> <div>如果您对我们的隐私政策以及我们如何处理您的信息有任何疑问，请随时通过以下电子邮件地址与我们联系：support@creamdata.net</div>

  </el-dialog>

    <el-dialog v-model="dialogTableVisibleTow">
      <div class="title">CreamData 隐私政策</div>

      <div>
        CreamData尊重并全力保护用户隐私。我们希望您了解我们收集的信息，不收集的信息以及我们如何收集、使用和存储信息。我们不收集您的活动日志，包括不记录浏览历史记录、流量数据、数据内容或DNS查询。我们也从不存储连接日志，这意味着您的IP地址、连接时间或会话持续时间都不会记录日志。
      </div>

      <div>本政策最新修订日期为二零二二年十月八日</div>

      <div class="sec-title">同意</div>

      <div>
        我们非常注重用户隐私，因此制定隐私政策。请您仔细阅读这些隐私政策的内容，以协助本平台为您提供满意的服务。本政策内容涵盖本平台如何经由使用本平台而收集所得的个人资料。
      </div>

      <div>
        使用本站点服务，即表示您已同意接受本平台的隐私政策，并同意本平台按照以下政策收集个人资料及使用方法。本平台可能不定时修改本隐私政策。任何修改将显示于此页中。请您定时浏览本网页。
      </div>

      <div class="sec-title">
        信息收集 </div>
      <div>
        当您注册本平台时，您可以选择填写邮箱，但是邮箱不是必须的，不填写也不会影响帐号注册。我们非常尊重用户个人信息，不会为满足协力厂商行销目的而向其出售或出租您的任何信息。我们可能会在下列情况下将您的信息与协力厂商共享：
      </div>

      <div>
        比如说，我们在使用协力厂商平台工具来分析用户数据时可能会使用您的信息。我们会通过您提供的联系方式向您发送服务通知以及对您的客服请求作出响应。您可以登入本平台修改您的个人资料。
      </div>

      <div>
        CreamData使用您的电子邮件地址的原因如下：
      </div>

      <ul>
        <li>
          提供指向我们网站的连接，包括密码重置电子邮件；
        </li>
        <li>
          与您交流有关您的VPN服务或响应您的交流；
        </li>
        <li>
          发送行销信息，您可以按照这些电子邮件中所述的退出程序选择不接收行销电子邮件。
        </li>
      </ul>
      <div>
        CreamData仅将您的个人信息用于本隐私政策中列出的目的，我们不会将您的个人信息出售给协力厂商。
      </div>
      <div class="sec-title">
        信息传输
      </div>
      <div>
        我们的服务遍布全球，因此，您的数据将通过我们的全球服务器传输，这些服务器可能不在您居住的国家。我们依靠某些协力厂商服务提供者来使我们能够为您提供我们的服务。每当我们传输您的信息时，我们都会采取措施对其进行保护。
      </div>
      <div>
        您承认并了解，您的信息将按照说明进行信息传输，这是提供我们的服务并遵守我们的服务条款所必需的。
      </div>
      <div class="sec-title">
        信息安全
      </div>
      <div>
        您也有责任保护及妥善存放个人资料，避免通过任何途径（包括电话以及电邮）向其他人分享或公开您在本平台的登入密码。
      </div>
      <div>
        必要时，我们会使用强大的加密算法来安全地保护所有公钥和私钥以及密码。采取了适当的安全措施来保护此信息，防止未经授权的访问，未经授权的更改，破坏或泄露数据。CreamData员工，承包商和代理商对个人信息的访问受到限制。这些员工要求提供信息以运营、发展或改善我们的服务，但受保密义务的约束。如果不履行这些义务，他们可能会受到纪律处分，包括解雇和刑事起诉。
      </div>
      <div class="sec-title">Cookies</div>
      <div>
        CreamData使用几种不同类型的cookie来改善网站上的用户体验，例如：
      </div>
      <ul>
        <li>
          Google Analytics（分析），用于统计评价和网站性能改善；
        </li>
        <li>
          邀请码Cookie，以识别我们的合作伙伴推荐给本站点的客户，以便我们可以向推荐人授予佣金；
        </li>
        <li>
          Cookies，用于为用户个性化网站内容，例如设定默认语言。
        </li>
      </ul>
      <div>
        您可以在网站每次在浏览器中放置cookie时设定警告，也可以选择禁用所有cookie。您可以同时通过浏览器设定进行操作。由于每种浏览器都有不同的cookie管理程序，请查看浏览器的“帮助”菜单以了解正确的方法。
      </div>
      <div>
        另外，您也可以访问“网络广告主动退出”页面或使用Google Analytics（分析）退出浏览器外挂程序来禁用所有cookie。请注意，选择禁用cookie可能会对某些功能产生负面影响，这些功能会使您的网站体验更加高效。
      </div>
      <div class="sec-title">
        协力厂商网站
      </div>
      <div>
        CreamData的网站可能包含指向其他协力厂商网站的连接。请了解并理解，我们不控制他们如何操作其隐私惯例，我们对此不承担任何责任。
      </div>
      <div class="sec-title">
        同意和年龄限制
      </div>
      <div>
        使用网站、内容、应用程序、软件或服务，即表示您同意按照我们的服务条款和隐私政策中所述处理您的信息。
      </div>
      <div>
        该服务适用于18岁以上的成年人。如果您认为您的孩子已经向我们提供了信息，请立即告知我们。
      </div>
      <div class="sec-title">
        适用法律
      </div>
      <div>
        使您的信息保密是我们的核心使命。为了履行这一使命，CreamData的注册营业地点是在塞舌尔，塞舌尔拥有完整的数据保护法规，CreamData遵守服务器所在地的法律或执法机构的要求。
      </div>
      <div>
        请务必注意，CreamData不会收集任何IP地址、浏览历史记录、流量数据等。
      </div>
      <div class="sec-title">
        欧盟用户
      </div>
      <div>
        CreamData致力于在全球范围内保护用户隐私，我们现有的做法通过最小化数据收集并确保用户可以控制其个人信息来体现这一点。欧盟（EU）的通用数据保护法规（GDPR）要求我们以特定管道为欧盟用户概述这些做法。
      </div>
      <div>
        根据GDPR的规定，我们会根据以下情况之一收集和处理本隐私政策中概述的数据：
      </div>
      <ul>
        <li>
          为了履行我们对用户的合同义务，包括：
        </li>
        <ul>
          <li>
            向用户提供他们所请求的服务和应用程序。
          </li>
          <li>
            管理用户订阅并处理付款。
          </li>
          <li>提供客户支持。</li>
        </ul>
        <li>
          为了与我们的业务运营相关的合法利益，包括：
        </li>
        <ul>
          <li>
            提高我们的网站，服务和应用程序的质量，可靠性和有效性。
          </li>
          <li>
            与客户沟通以提供信息并寻求与我们的服务和应用程序有关的回响。
          </li>
        </ul>
        <li>
          经用户同意，该用户可以随时退出。
        </li>
      </ul>
      <div>
        您可以根据GDPR行使您的权利，以访问、转移、更正、删除或反对处理您的个人信息，方法是通过support@creamdata.net与我们联系。
      </div>
      <div class="sec-title">
        隐私政策的变更
      </div>
      <div>
        根据适用的隐私法律和原则，我们可能会不时更改隐私政策，恕不另行通知。您继续使用本站点或服务即表示您接受我们的隐私政策。
      </div>
      <div class="sec-title">
        联系我们
      </div>
      <div>
        如果您对我们的隐私政策以及我们如何处理您的信息有任何疑问，请随时通过以下电子邮件地址与我们联系：support@creamdata.net
      </div>
    </el-dialog>
  </template>

<style scoped>


:root {
  --main-bg-color: #f0f2f5; /* 默认背景颜色 */
}

main {
  background-color: var(--main-bg-color);
}

.header{
  height: 60px;
  display: flex;
}

.img{
  width: 140px;
  height: 50px;
  margin-left: 3.5%;
  cursor: pointer;
}
.img2{
  width: 40px;
  height: 50px;
  margin-left: 25%;
  display: none;
  cursor: pointer;
}


el-menu {
  border-right: none;
}



.el-menu-vertical-demo2 {
  height: 895px;
  width: 200px;
}

.card_a{
  text-align: center;
  text-decoration: none; /* 移除下划线 */
  color: #696464;
}


@media screen and (max-width: 1700px) {
  .account{
    margin-left: 15%;
    font-size: 14px;
  }
  .img_A{
    display: none;
  }

  .el-menu-vertical-demo {
    height: 860px;
  }
    .el-button2{
      display: none;
    }
    .accountCol {
      margin-top: 0.5%; /*顶部距离*/
      text-align: right /*左边距*/
    }
    .collapsed {
      width: 64px;
    }
  /* 初始状态样式 */
  .text-element {
    color: #303133; /* 初始颜色 */
    margin-left: 72%;
  }

  /* 鼠标悬停时的样式 */
  .text-element:hover {
    color: #409EFF; /* 悬停时的颜色 */
  }
  /*版权文字 样式*/
  .text-element2 {
    color: #303133; /* 初始颜色 */
    margin-left: 1%
  }
  /*版权文字 样式*/
  .text-element2:hover {
    color: #409EFF; /* 悬停时的颜色 */
  }

  /*版权文字*/
  .divText{
    margin-top: 1%;
  }

  .main-content {
    transition: margin-left 0.3s;
    overflow-y: auto; /* 允许垂直滚动 */
    height: 100%; /* 高度充满父元素 */
  }

  :deep(.main-content){
    height: 800px;
    overflow: auto;
    scrollbar-width: thin; /* 定义滚动条的宽度 */
    scrollbar-color: transparent transparent; /* 定义滚动条的颜色 */
  }

  /* 隐藏滚动条 */
  :deep(.main-content::-webkit-scrollbar) {
    width: 8px; /* 定义滚动条宽度 */
    height: 8px;
    background-color: transparent; /* 滚动条背景颜色 */
  }

  :deep(.main-content::-webkit-scrollbar-thumb) {
    background-color: transparent; /* 滚动条滑块颜色 */
    border-radius: 4px; /* 滚动条滑块圆角 */
  }

  :deep(.main-content::-webkit-scrollbar-thumb:hover) {
    background-color: rgba(0, 0, 0, 0.2); /* 鼠标悬停时滚动条滑块颜色 */

  }
  .asideWidth{
    transition: width 0.3s;
    overflow: hidden;
    top: 0; /* 固定在顶部 */
    bottom: 0; /* 固定在底部 */
  }

  .el-button{
    margin-top: 1%;
  }



}

@media screen and (max-width: 420px) {
  .account{
    margin-left: 5%;
    font-size: 11px;
  }
  .img_A{
    display: block;
    height: 100px;
  }
  .row{
    flex-wrap: nowrap
  }
  .el-menu-vertical-demo {
    display: none;
  }
  .el-button{
    display: none;
  }
  .el-button2{
    margin-top: 10%;
    display: block;
  }
  .accountCol {
    margin-top: 2%;
    margin-left: 35%;
  }
  .asideWidth{
    width: 0;
    height: 896px;
  }
  .collapsed {
    width: 0;
  }

  /* 初始状态样式 */
  .text-element {
    color: #303133; /* 初始颜色 */
    margin-left: 30%;
    font-size: 9px;
  }

  /* 鼠标悬停时的样式 */
  .text-element:hover {
    color: #409EFF; /* 悬停时的颜色 */
  }

  .text-element2 {
    color: #303133; /* 初始颜色 */
    margin-left: 2.5%;
    font-size: 9px;
  }

  .text-element2:hover {
    color: #409EFF; /* 悬停时的颜色 */
  }

  .text-element3 {
    font-size: 9px;
    margin-bottom: 5%;
  }

  .divText{
    margin-top: 8%;
  }

}




</style>